Skip to content

feat(core): render message actions as buttons on toast notifications - #526

Closed
dvcolomban wants to merge 4 commits into
vitejs:mainfrom
dvcolomban:dvcol/toast-message-actions
Closed

feat(core): render message actions as buttons on toast notifications#526
dvcolomban wants to merge 4 commits into
vitejs:mainfrom
dvcolomban:dvcol/toast-message-actions

Conversation

@dvcolomban

@dvcolomban dvcolomban commented Aug 10, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Why

Toasts only ever showed the dismiss ✕ — an entry's own actions (e.g. the activate kind, which focuses a dock) only rendered in the messages panel's detail view, not on the toast that actually announced it.

What changed

  • Renders entry.actions as buttons in the toast's own #actions slot, dispatching the same way the messages panel does: switchEntry(action.activate.dockId).
  • Fixes a pre-existing bug found while manually testing this: switchEntry('devframes-plugin-messages') (hyphens) never matched the dock's real mounted id, devframes_plugin_messages (underscores, PLUGIN_ID in @devframes/plugin-messages's constants.ts) — a typo from the devframe 0.6 migration (feat!: migrate to devframe 0.6 — official plugins, crossws + OTP auth #396) that's been silently breaking "click a toast to open messages" ever since.
  • Adds a "Toast: With Action" button next to the existing Quick Actions in the playground's debug dashboard, so this (and the id fix) is easy to re-verify by hand later.

Linked Issues

Additional context

Verified by hand against the playground: firing the new demo toast and clicking its action button focuses the messages dock. Full gate (pnpm build/test/typecheck/lint) green — 381 tests passing.

@dvcolomban
feat(core): render message actions as buttons on toast notifications
61dd3b3 
Toasts only exposed the dismiss ✕ button; an entry's own `actions`
(e.g. an `activate` action that focuses a dock) were only rendered in
the messages panel's detail view. Render them as buttons in the
toast's `#actions` slot too, dispatching the same way the messages
panel does: `switchEntry(action.activate.dockId)`, the local
counterpart of the `hub:docks:activate` RPC our shell already handles
in `context.ts`.
@dvcolomban
fix(core): correct the messages dock id used by ToastOverlay
92c8e91 
`switchEntry('devframes-plugin-messages')` (hyphens) never matched the
actual mounted dock id, `devframes_plugin_messages` (`PLUGIN_ID` in
`@devframes/plugin-messages`'s `constants.ts`) — a typo introduced by
the devframe 0.6 migration (vitejs#396). Clicking a toast to open the
messages panel silently no-op'd; same typo had just been copied into
the new `WithAction` story added alongside toast action buttons.
@dvcolomban
feat(playground): add a toast-with-action demo to the debug dashboard
6b05e54 
Manual coverage for the new toast action buttons (previous commit):
"Toast: With Action" fires a message with a `view` action that focuses
the messages dock, exercising `ToastOverlay`'s new `#actions` rendering
and `dispatchAction` end to end alongside the existing Quick Actions.
@pkg-pr-new

pkg-pr-new Bot commented Aug 10, 2026 •
edited
Loading

Copy link
Copy Markdown

Open in StackBlitz

@vitejs/devtools

npm i https://pkg.pr.new/@vitejs/devtools@526

@vitejs/devtools-kit

npm i https://pkg.pr.new/@vitejs/devtools-kit@526

@vitejs/devtools-oxc

npm i https://pkg.pr.new/@vitejs/devtools-oxc@526

@vitejs/devtools-rolldown

npm i https://pkg.pr.new/@vitejs/devtools-rolldown@526

@vitejs/devtools-vite

npm i https://pkg.pr.new/@vitejs/devtools-vite@526

@vitejs/devtools-vitest

npm i https://pkg.pr.new/@vitejs/devtools-vitest@526

commit: a5494cf

@dvcolomban
dvcolomban marked this pull request as ready for review August 10, 2026 15:17
@antfubot antfubot mentioned this pull request Aug 14, 2026
Closed
@antfubot

antfubot commented Aug 14, 2026

Copy link
Copy Markdown
Collaborator

Thanks for this fix!

As of #529, the client UI previously at packages/core/src/client/** (webcomponents, dock, floating popover, json-render, inject runtime, etc.) has moved out of this repo. It now lives upstream in devframe (@devframes/hub-ui / @devframes/json-render-ui), and this repo consumes it as a published dependency instead of owning the source.

ToastOverlay.vue and the dock-id typo fix fall in that moved tree, so we're labeling this devframe and opened devframes/devframe#212 to port that part upstream and credit you as the original author. The playgrounds/core/src/pages/devtools.vue demo-button addition is unaffected by the migration though — feel free to re-open that part directly against this repo if you'd like it in independently.

Thank you for the work, and sorry for the churn from the migration. Feel free to pick up the hub-ui port yourself (linking back to this PR) if you'd like; otherwise we'll route it through the linked issue.

@antfubot antfubot added the devframe Affected by the devframe/hub-ui migration; fix belongs upstream in devframe label Aug 14, 2026
@antfubot antfubot mentioned this pull request Aug 14, 2026
Merged
@antfu antfu closed this Aug 14, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

devframe Affected by the devframe/hub-ui migration; fix belongs upstream in devframe

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@dvcolomban @antfubot @antfu